<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>前端路由的基石_history</title>
</head>
<body>

<a href="http://www.baidu.com" onclick="toTest1();return false;">push test1</a>
<br/>
<button onclick="push('/test2')">push test2</button>
<br/>
<button onclick="replace('/test3')">replace test3</button>
<br/>
<button onclick="back()">回退</button>
<button onclick="forward()">前进</button>

<script src="./history_4.7.2.js"></script>
<script>

// 原理：BOM的window.history

// let history = History.createBrowserHistory(); // 方法一：直接使用H5推出的history身上的API。兼容性不好，有些浏览器不认识
let history = History.createHashHistory(); // 方法二：hash值（锚点）。兼容性特别好
console.log(history)

function toTest1() {
	history.push('/test1');
}

function push(path) {
	history.push(path);
	return false;
}

function replace(path) {
	history.replace(path)
}

function back() {
	history.goBack();
}

function forward() {
	history.goForward();
}

history.listen((location) => {
	console.log('请求路由路径变化了', location);
})

</script>
</body>
</html>